<template>
  <div class="app-container">
    <v-row justify="center">
      <v-dialog
        v-model="visible"
        persistent
        transition="dialog-top-transition"
        max-width="780px">

        <v-card :rules="rules">
          <!-- 对话框标题 -->
          <v-card-title>
            <span style="font-size: 18px">添加公告</span>
          </v-card-title>

          <!-- 表单 -->
          <v-form ref="form" v-model="valid" style="max-height: 600px;overflow: auto;">
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12" sm="6">
                    <v-text-field
                      label="*公告标题"
                      v-model="form.noticeTitle"
                      :rules="rules.noticeTitle"
                      placeholder="请输入公告标题"
                      required
                      clearable
                      dense
                    ></v-text-field>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-select
                      label="*公告类型"
                      v-model="form.noticeType"
                      :rules="rules.noticeTitle"
                      :items="typeOptions"
                      item-text="dictLabel"
                      item-value="dictValue"
                      dense
                    ></v-select>
                  </v-col>

                  <v-col cols="12" sm="6">
                    <v-radio-group
                      label="状态"
                      v-model="form.status"
                      :rules="rules.status"
                      row dense style="margin: 0;"
                    >
                      <v-radio
                        v-for="dict in statusOptions"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></v-radio>
                    </v-radio-group>
                  </v-col>

                  <v-col cols="12" sm="12" style="padding-bottom: 0;padding-top: 0;margin-top: 10px;display: inline-block">
                    <span style="color: rgba(0, 0, 0, 0.6);padding: 0;margin: 0;width: 65px">内容</span>
                      <div style="float: right;width: 95%;margin-bottom: 10px">
                        <editor v-model="form.noticeContent" :min-height="192" style="border-radius: 5px"/>
                      </div>
                  </v-col>
                </v-row>
              </v-container>
              <small class="ml10">*表示必需字段</small>
            </v-card-text>
          </v-form>

          <!-- 底部操作按钮 -->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              text
              @click="updateVisible(false)">
              取消
            </v-btn>
            <v-btn
              color="blue darken-1"
              text
              @click="submitForm">
              保存
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </div>
</template>

<!-- 添加公告对话框 -->
<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import Editor from '@/components/Editor';
  import { addNotice } from "@/api/system/notice";

  export default {
    name: "NoticeAddComp",
    props: {
      visible: Boolean, // 是否打开对话框
      statusOptions: Array,
      typeOptions: Array,
    },
    components: {
      Editor
    },
    emits: ['updateVisible'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表单参数
        form: { status: '1' },
        // 表单校验
        rules: {
          noticeTitle: [
            v => !!v || '公告标题不能为空',
          ],
          noticeType: [
            val => (val || '').length > 0 || '公告类型不能为空',
          ],
        },
        valid: true, // 表单校验
      };
    },
    methods: {
      validate () {
        this.$refs.form.validate()
      },
      /** 保存 */
      async submitForm() {
        console.log(this.form)
        await this.validate();
        if (this.valid) {
          addNotice(this.form).then(res => {
            // 使用全局消息提示
            this.$store.dispatch('snackbar/openSnackbar',{
              msg: '新增成功',
              color: 'success'
            })
            this.$emit('done');
            this.updateVisible(false);
          });
        }
      },
      // 调用父级关闭对话框, 并重置表单
      updateVisible(value) {
        this.reset();
        this.$emit('updateVisible', value);
      },
      // 表单重置
      reset() {
        this.form = { status: '1' };
        if (this.$refs.form) {
          this.$refs.form.resetValidation();
        }
      }
    }
  };
</script>
